<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<script>
const SCREEN_WIDTH = 375
export default {
  created() {
    document.querySelector('html').style.fontSize = getFontSize()
    window.addEventListener('resize', () => {
      document.querySelector('html').style.fontSize = getFontSize()
    })
  }
}

function getFontSize() {
  let width = document.body.clientWidth
  // console.log(width)
  let rem = width * 100 / SCREEN_WIDTH
  return rem + 'px'
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}
</style>
